<template>
  <div class="wrapper">
    <input type="text" v-model="account">
    &nbsp;&nbsp;
    <input type="text" v-model="nickname">
    <hr>
    <p>account: {{ account }} / nickname: {{ nickname }}</p>
    <p>问题: toRef 与 toRefs 有什么关系？有什么区别？</p>
  </div>
</template>

<script>
import { reactive, toRefs } from 'vue';

export default {
  setup(){
    let u = reactive( { account: 'sanfeng' , nickname: '三丰' } );
    // 将 响应式对象 转换为 普通对象
    // 其结果对象的 每个 property 都是指向 原始对象 相应 property 的 Ref
    let x = toRefs( u );
    console.log( x );
    return x; // return { account: toRef( u , 'account' ) , nickname: toRef( u , 'nickname' ) }
  }
}
</script>

<style scoped>
.wrapper {
    margin: 15px;
    border: 1px solid #dedede;
    box-shadow: 0 0 20px -10px blue;
}
</style>